<!DOCTYPE html><html><head>
      <title>README2</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\liangjb\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.8.11\crossnote\dependencies\katex\katex.min.css">
      
      
      
      
      
      <style>
      code[class*=language-],pre[class*=language-]{color:#333;background:0 0;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.4;-moz-tab-size:8;-o-tab-size:8;tab-size:8;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:.8em;overflow:auto;border-radius:3px;background:#f5f5f5}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal;background:#f5f5f5}.token.blockquote,.token.comment{color:#969896}.token.cdata{color:#183691}.token.doctype,.token.macro.property,.token.punctuation,.token.variable{color:#333}.token.builtin,.token.important,.token.keyword,.token.operator,.token.rule{color:#a71d5d}.token.attr-value,.token.regex,.token.string,.token.url{color:#183691}.token.atrule,.token.boolean,.token.code,.token.command,.token.constant,.token.entity,.token.number,.token.property,.token.symbol{color:#0086b3}.token.prolog,.token.selector,.token.tag{color:#63a35c}.token.attr-name,.token.class,.token.class-name,.token.function,.token.id,.token.namespace,.token.pseudo-class,.token.pseudo-element,.token.url-reference .token.variable{color:#795da3}.token.entity{cursor:help}.token.title,.token.title .token.punctuation{font-weight:700;color:#1d3e81}.token.list{color:#ed6a43}.token.inserted{background-color:#eaffea;color:#55a532}.token.deleted{background-color:#ffecec;color:#bd2c00}.token.bold{font-weight:700}.token.italic{font-style:italic}.language-json .token.property{color:#183691}.language-markup .token.tag .token.punctuation{color:#333}.language-css .token.function,code.language-css{color:#0086b3}.language-yaml .token.atrule{color:#63a35c}code.language-yaml{color:#183691}.language-ruby .token.function{color:#333}.language-markdown .token.url{color:#795da3}.language-makefile .token.symbol{color:#795da3}.language-makefile .token.variable{color:#183691}.language-makefile .token.builtin{color:#0086b3}.language-bash .token.keyword{color:#0086b3}pre[data-line]{position:relative;padding:1em 0 1em 3em}pre[data-line] .line-highlight-wrapper{position:absolute;top:0;left:0;background-color:transparent;display:block;width:100%}pre[data-line] .line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}pre[data-line] .line-highlight:before,pre[data-line] .line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}pre[data-line] .line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}html body{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ol,html body>ul{margin-bottom:16px}html body ol,html body ul{padding-left:2em}html body ol.no-list,html body ul.no-list{padding:0;list-style-type:none}html body ol ol,html body ol ul,html body ul ol,html body ul ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:700;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::after,html body code::before{letter-spacing:-.2em;content:'\00a0'}html body pre>code{padding:0;margin:0;word-break:normal;white-space:pre;background:0 0;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:after,html body pre code:before,html body pre tt:after,html body pre tt:before{content:normal}html body blockquote,html body dl,html body ol,html body p,html body pre,html body ul{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body code,html body pre{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview ul{list-style:disc}.markdown-preview ul ul{list-style:circle}.markdown-preview ul ul ul{list-style:square}.markdown-preview ol{list-style:decimal}.markdown-preview ol ol,.markdown-preview ul ol{list-style-type:lower-roman}.markdown-preview ol ol ol,.markdown-preview ol ul ol,.markdown-preview ul ol ol,.markdown-preview ul ul ol{list-style-type:lower-alpha}.markdown-preview .newpage,.markdown-preview .pagebreak{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center!important}.markdown-preview:not([data-for=preview]) .code-chunk .code-chunk-btn-group{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .status{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .output-div{margin-bottom:16px}.markdown-preview .md-toc{padding:0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link div,.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}.markdown-preview .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0;min-height:100vh}@media screen and (min-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{font-size:14px!important;padding:1em}}@media print{html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc{padding:0 16px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link div,html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% - 300px);padding:2em calc(50% - 457px - 300px / 2);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
      <!-- The content below will be included at the end of the <head> element. --><script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    // your code here
  });
</script></head><body for="html-export">
    
    
      <div class="crossnote markdown-preview  ">
      
<h1 id="介绍">介绍 </h1>
<p>renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。</p>
<h1 id="功能">功能 </h1>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>- 登录/退出 (接口数据交互)
- 管理员列表 (接口数据交互)
- 角色管理 (接口数据交互)
- 菜单管理 (接口数据交互)
- SQL监控 (接口数据交互)
- 定时任务 (接口数据交互)
- 参数管理 (接口数据交互)
- 文件上传 (接口数据交互)
- 系统日志 (接口数据交互)
- 前后端分离，通过token进行数据交互，可独立部署
- 主题定制，通过scss变量统一一站式定制
- 动态菜单，通过菜单管理统一管理访问路由
- 数据切换，通过mock配置对接口数据／mock模拟数据进行切换
- 发布时，可动态配置CDN静态资源／切换新旧版本
- 更多，持续迭代中...
</code></pre><h1 id="技术栈">技术栈 </h1>
<p>你需要在本地安装 nodejs，提前了解和学习这些知识会对使用本项目有很大的帮助。</p>
<ul>
<li><a href="http://nodejs.org/">nodejs</a></li>
<li><a href="http://es6.ruanyifeng.com/">ES6</a></li>
<li><a href="https://github.com/vuejs/vue-cli">vue-cli</a></li>
<li><a href="https://cn.vuejs.org/index.html">vue</a></li>
<li><a href="https://github.com/vuejs/vue-router">vue-router</a></li>
<li><a href="https://github.com/vuejs/vuex">vuex</a></li>
<li><a href="https://github.com/axios/axios">axios</a></li>
<li><a href="https://github.com/ElemeFE/element">vue-cookie</a></li>
<li><a href="https://github.com/ElemeFE/element">element-ui</a></li>
<li><a href="http://www.iconfont.cn/">iconfont</a></li>
</ul>
<h1 id="目录结构">目录结构 </h1>
<p>本项目已经通过vue-cli脚手架为你生产完整的开发框架（有根据业务需求做调整修改），下面是整个项目的目录结构</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>├── dist                       // 构建打包生成部署文件
│   ├── 1805021549             // 静态资源（18年05月03日15时49分）
│   ├── config                 // 配置
│   ├── index.html             // index.html入口
├── build                      // 构建相关  
├── config                     // 构建配置相关
├── src                        // 源代码
│   ├── assets                 // 静态资源
│   ├── components             // 全局公用组件
│   ├── element-ui             // element-ui组件配置
│   ├── element-ui-theme       // element-ui组件主题配置
│   ├── icons                  // 所有 svg icons
│   ├── mock                   // mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口组件
│   ├── main.js                // 入口
├── static                     // 第三方不打包资源
│   ├── config                 // 全局变量配置
│   ├── plugins                // 插件
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json
</code></pre><h1 id="安装">安装 </h1>
<p>安装过程中，可能会出现安装过慢、报错等情况，请尝试以下2种方式：</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code># 克隆项目
git clone https://github.com/daxiongYang/renren-fast-vue.git

# 安装依赖
# 1
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 2
cnpm install

# 启动服务
npm run dev

# 克隆项目
git clone https://github.com/daxiongYang/renren-fast-vue.git

# 安装依赖
npm install

# 启动服务
npm run dev
</code></pre><h1 id="布局--主题">布局 &amp; 主题 </h1>
<p>整体布局包括：</p>
<ul>
<li>头部导航条 main-navbar</li>
<li>左侧边栏 main-sidebar</li>
<li>中间内容展示 main-content</li>
</ul>
<blockquote>
<p>对应代码在 src/views/main.vue</p>
</blockquote>
<p>renren-vue-fast中除去404、login页面，其它页面都是基于这个布局的。这里我将</p>
<ul>
<li>
<p>无需嵌套上左右整体布局的路由称为“全局路由”放在globalRoutes常量中，</p>
</li>
<li>
<p>需嵌套上左右整体布局的路由称为“主入口路由”放在mainRoutes常量的children属性中。</p>
</li>
</ul>
<blockquote>
<p>对应代码在 src/router/index.js</p>
</blockquote>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>// 全局路由(无需嵌套上左右整体布局)
const globalRoutes = [
  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } }
]

// 主入口路由(需嵌套上左右整体布局)
const mainRoutes = {
  path: '/',
  component: _import('main'),
  name: 'main',
  redirect: { name: 'home' },
  meta: { title: '主入口整体布局' },
  children: [
    // 通过meta对象设置路由展示方式
    // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
    // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
    {
      path: '/demo-01',
      component: null, // 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
      name: 'demo-01',
      meta: {
        title: '我是一个通过iframe嵌套展示内容, 并通过tab打开 demo',
        isTab: true,
        iframeUrl: 'http://fast.demo.renren.io/'
      }
    }
  ],
  beforeEnter (to, from, next) {
    let token = Vue.cookie.get('token')
    if (!token || !/\S/.test(token)) {
      next({ name: 'login' })
    }
    next()
  }
}

const router = new Router({
  mode: 'hash',
  scrollBehavior: () =&gt; ({ y: 0 }),
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)
})
</code></pre><p>同时，主入口路由提供meta对象2个属性设置路由展示方式。</p>
<p><code>isTab:</code> 是否通过tab展示内容<br>
<code>iframeUrl:</code> 是否通过iframe嵌套展示内容</p>
<blockquote>
<p>如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!</p>
</blockquote>
<h1 id="菜单路由">菜单路由 </h1>
<p>之前版本的菜单路由都需要手动在router/index.js文件中添加，这次新版本提供通过菜单管理统一管理访问路由，自动映射对应文件目录组件（配合代码生成器开发更愉快哦）。具体请点击移步动态菜单路由。</p>
<h1 id="主题定制">主题定制 </h1>
<p>提供12套颜色主题，进行element-ui和整站主题切换。具体切换方法如下：</p>
<ol>
<li>修改/src/element-ui-theme/index.js文件中import './element-[#17b3a3]/index.css'[]中括号中的值，值可以在同文件中list属性中取即可。（注意：这里只是修改element-ui组件主题）</li>
<li>修改/src/assets/scss/_variables.scss文件中$--color-primary: [#17b3a3];[]中括号中的值，值与第一步值同步即可。（注意：这里只是修改站点主题，不包括element-ui组件主题）</li>
</ol>
<p>主题定制具体实现方法是：</p>
<ol>
<li>先通过element-ui官方提供的在线主题生成工具，进行切换主题色，再下载解压文件（保留fonts目录中文件和index.css即可）放置/src/element-ui-theme/目录中，使用同目录中的index.js进行统一配置管理。</li>
<li>再设置修改站点主题，使整站主题色统一一致。</li>
</ol>
<blockquote>
<p>之所以放弃之前直接在项目中通过scss一站式设置主题，是因为开发时编译太慢！同时按需求加载组件的css文件并没有比现在的index.css文件小多少kb（主要大小还是在js文件上）。考虑到大部分一个站配置一个主题色后，不会频繁修改！</p>
</blockquote>
<blockquote>
<p>网上查阅也有通过打包插件，对css添加父级id or class进行主题切换的，但是这样就相当于12套皮肤，需要将12个index.css进行合并打包发布，那文件岂不是太大了！这样的需求暂不考虑！</p>
</blockquote>
<p>总之主题定制这块，还需要花更多的心思优化改进！大家可以多多给点思路和建议哦 0.0</p>
<h1 id="动态菜单路由">动态菜单路由 </h1>
<p>通过菜单管理统一管理访问路由，自动映射对应文件目录[src/views/modules/...]组件。功能实现通过拦截路由进行逻辑判断处理。</p>
<p><b>这里需特别注意，在通过左侧边栏菜单管理，操作新增／修改[菜单路由]项，进行自动映射对应文件目录组件时的规则，规则如下：</b></p>
<ul>
<li>值为/sys/user自动映射对应文件目录为src/views/modules/[sys/user.vue]文件</li>
<li>值项为/job/schedule自动映射对应文件目录为src/views/modules/[job/schedule.vue]文件</li>
<li>值项为<a href="http://fast.demo.renren.io/%E8%87%AA%E5%8A%A8%E4%BD%BF%E7%94%A8iframe%E8%AE%BF%E9%97%AEhttp://fast.demo.renren.io/%E5%9C%B0%E5%9D%80%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E5%8F%AA%E8%A6%81%E6%98%AF%E4%BB%A5http%5Bs%5D?://%E5%BC%80%E5%A4%B4%E6%97%B6%EF%BC%8C%E9%83%BD%E9%80%9A%E8%BF%87iframe%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80%EF%BC%8C%E4%B8%8D%E5%86%8D%E8%87%AA%E5%8A%A8%E6%98%A0%E5%B0%84">http://fast.demo.renren.io/自动使用iframe访问http://fast.demo.renren.io/地址，也就是说只要是以http[s]?://开头时，都通过iframe访问地址，不再自动映射</a></li>
</ul>
<p><b>如何确定新增／修改菜单路由是否映射成功？</b><br>
所有的动态菜单路由都会保存在sessionStorage['dynamicMenuRoutes']属性中，同时输出在浏览器控制台</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>!&lt;-------------------- 动态(菜单)路由 s --------------------&gt;
数据对象
!&lt;-------------------- 动态(菜单)路由 s --------------------&gt;
</code></pre><ol>
<li>先查看dynamicMenuRoutes每一项中的meta: { iframeUrl: '' }属性，如果iframeUrl === ''，那么就会自动映射对应文件目录。如果iframeUrl !== ''就会通过iframe访问地址，无需查看第二步。</li>
<li>再查看dynamicMenuRoutes每一项中的component: null属性，如果component === null ，那么就是自动映射对应文件目录失败。如果component !== null自动映射对应文件目录成功。</li>
</ol>
<blockquote>
<p>对应代码在 src/router/index.js</p>
</blockquote>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>router.beforeEach((to, from, next) =&gt; {
  // 添加动态(菜单)路由
  // 1. 已经添加 or 全局路由, 直接访问
  // 2. 获取菜单列表, 添加并保存本地存储
  if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to) === 'global') {
    next()
  } else {
    http({
      url: http.adornUrl('/sys/menu/nav'),
      method: 'get',
      params: http.adornParams()
    }).then(({data}) =&gt; {
      if (data &amp;&amp; data.code === 0) {
        fnAddDynamicMenuRoutes(data.menuList)
        router.options.isAddDynamicMenuRoutes = true
        sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
        sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
        next({ ...to, replace: true })
      } else {
        sessionStorage.setItem('menuList', '[]')
        sessionStorage.setItem('permissions', '[]')
        next()
      }
    })
  }
})

/**
 * 判断当前路由类型, global: 全局路由, main: 主入口路由
 * @param {*} route 当前路由
 */
function fnCurrentRouteType (route) {
  var temp = []
  for (var i = 0; i &lt; globalRoutes.length; i++) {
    if (route.path === globalRoutes[i].path) {
      return 'global'
    } else if (globalRoutes[i].children &amp;&amp; globalRoutes[i].children.length &gt;= 1) {
      temp = temp.concat(globalRoutes[i].children)
    }
  }
  return temp.length &gt;= 1 ? fnCurrentRouteType(route, temp) : 'main'
}

/**
 * 添加动态(菜单)路由
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
  var temp = []
  for (var i = 0; i &lt; menuList.length; i++) {
    if (menuList[i].list &amp;&amp; menuList[i].list.length &gt;= 1) {
      temp = temp.concat(menuList[i].list)
    } else if (/\S/.test(menuList[i].url)) {
      var route = {
        path: menuList[i].url.replace('/', '-'),
        component: null,
        name: menuList[i].url.replace('/', '-'),
        meta: {
          menuId: menuList[i].menuId,
          title: menuList[i].name,
          isDynamic: true,
          isTab: true,
          iframeUrl: ''
        }
      }
      // url以http[s]://开头, 通过iframe展示
      if (isURL(menuList[i].url)) {
        route['path'] = `i-${menuList[i].menuId}`
        route['name'] = `i-${menuList[i].menuId}`
        route['meta']['iframeUrl'] = menuList[i].url
      } else {
        try {
          route['component'] = _import(`modules/${menuList[i].url}`) || null
        } catch (e) {}
      }
      routes.push(route)
    }
  }
  if (temp.length &gt;= 1) {
    fnAddDynamicMenuRoutes(temp, routes)
  } else {
    mainRoutes.name = 'main-dynamic'
    mainRoutes.children = routes
    router.addRoutes([
      mainRoutes,
      { path: '*', redirect: { name: '404' } }
    ])
    sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
    console.log('\n%c!&lt;-------------------- 动态(菜单)路由 s --------------------&gt;', 'color:blue')
    console.log(mainRoutes.children)
    console.log('%c!&lt;-------------------- 动态(菜单)路由 e --------------------&gt;\n\n', 'color:blue')
  }
</code></pre><h1 id="mockapi数据切换">mock/api数据切换= </h1>
<p>在前后端分离的情况下，往往前后台是并行开发的！两队先讨论商议确定接口名称、请求类型、请求参数、返回数据等后，就可以暂时并行开发了。为了让前端更加灵活的、更快捷的进行业务逻辑开发，这里提供通过mockJs本地接口拦截，返回模拟数据功能。</p>
<p><b>开启mock本地模拟数据</b></p>
<ol>
<li>通过设置/src/mock/index.js)文件中fnCreate(common, [false])[]中括号中为true／false开启关闭当前模块mock本地模拟数据功能。（默认开启）</li>
<li>通过设置/src/mock/modules/文件下模块isOpen: [false][]中括号中为true／false开启关闭当前api接口mock本地模拟数据功能。（默认开启）</li>
</ol>
<blockquote>
<p>具体模拟数据请参考：<a href="https://github.com/nuysoft/Mock">mockJs</a></p>
</blockquote>
<h1 id="打包--发布">打包 &amp; 发布 </h1>
<p>构建生成的资源文件保存在/dist目录下，可通过config/index.js目录文件修改相关配置信息</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code># 构建生产环境(默认)
npm run build

# 构建测试环境
npm run build --qa

# 构建验收环境
npm run build --uat

# 构建生产环境
npm run build --prod
</code></pre>
      </div>
      
      
    
    
    
    
    
    
  
    </body></html>